<section class="content-header">
    <h1>
        TIP分析
        <div class="btn-group pull-right">
            <button type="button" class="btn btn-default btn-sm" (click)="exportData()">
                数据导出
            </button>
        </div>
    </h1>
</section>
<!-- Main content -->
<section class="content">
    <div class="row">
        <div class="col-md-3 col-md-push-9">
            <div class="box box-default">
                <div class="box-header with-border">
                    <h3 class="box-title">查询区域</h3>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                    </div>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                    <div class="form-group">
                        <label for="DateTimeRange">时间</label>
                        <input type="text" class="form-control pull-right" id="DateTimeRange" placeholder="请选择日期" />
                    </div>
                    <div class="form-group">
                        <label>区域</label>
                        <dx-select-box style="width:100%;height:35px;margin-bottom:10px;border-radius: 0px" [items]="subAreaItems" displayExpr="subArea"
                            [(selectedItem)]="subAareSelected" (onValueChanged)="onSubAreaSelectedChange($event)" [value]="subAreaItems[0]"
                            [searchEnabled]="true">
                        </dx-select-box>
                    </div>
                    <div class="form-group">
                        <label>瓶颈设备</label>
                        <dx-select-box style="width:100%;height:35px;margin-bottom:10px;border-radius: 0px" [items]="equipemntItems" displayExpr="equipment"
                            [(selectedItem)]="equipmentSelected" [value]="equipmentSelected" [searchEnabled]="true">
                        </dx-select-box>
                    </div>
                    <div class="form-group">
                        <label>班次</label>
                        <dx-select-box style="width:100%;height:35px;margin-bottom:10px;border-radius: 0px" [items]="shiftItems" displayExpr="shiftName"
                            [(selectedItem)]="shiftSelected" [value]="shiftItems[0]" [searchEnabled]="true">
                        </dx-select-box>
                    </div>
                </div>
                <div class="box-footer">
                    <button type="button" class="btn btn-primary" (click)="getReportData()"> 查 询 </button>
                </div>
            </div>
        </div>
        <div class="col-md-9 col-md-pull-3">
            <div class="box box-default">
                <div class="box-header with-border">
                    <h3 class="box-title">TIP分析数据表</h3>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                    </div>
                </div>
                <div class="box-body">
                    <dx-data-grid id="gridContainer" [dataSource]="tipGridList" [showColumnLines]="true" [showRowLines]="true" [showBorders]="true"
                        [rowAlternationEnabled]="true" (onExporting)="onExporting($event)" [columnMinWidth]="50" [columnAutoWidth]="true">
                        <dxo-paging [pageSize]="10"></dxo-paging>
                        <dxo-export [enabled]="true" fileName="TIP分析数据表" [allowExportSelectedData]="false"></dxo-export>
                        <dxo-pager [showPageSizeSelector]="true" [allowedPageSizes]="[10, 20, 100]" [showInfo]="true">
                        </dxo-pager>
                        <dxi-column dataField="productDate" caption="生产日期">
                        </dxi-column>
                        <dxi-column dataField="shift" caption="班次">
                        </dxi-column>
                        <dxi-column dataField="ratedCT" caption="瓶颈工位设定节拍">
                        </dxi-column>
                        <dxi-column dataField="actualCT" caption="瓶颈工位实际节拍">
                        </dxi-column>
                        <dxi-column dataField="actual" caption="瓶颈工位实际产量">
                        </dxi-column>
                        <dxi-column dataField="offLineCount" caption="下线实际产量">
                        </dxi-column>
                        <dxi-column dataField="totCT" caption="瓶颈Total Cycle">
                        </dxi-column>
                        <dxi-column dataField="downCount" caption="瓶颈停机次数">
                        </dxi-column>
                        <dxi-column dataField="downTime" caption="瓶颈停机时间(分)">
                        </dxi-column>
                        <dxi-column dataField="numTCT" caption="瓶颈换刀次数">
                        </dxi-column>
                        <dxi-column dataField="totTCT" caption="瓶颈换刀时间(分)">
                        </dxi-column>
                        <dxi-column dataField="numBT" caption="瓶颈堵料次数">
                        </dxi-column>
                        <dxi-column dataField="totBT" caption="瓶颈堵料时间(分)">
                        </dxi-column>
                        <dxi-column dataField="numST" caption="瓶颈待料次数">
                        </dxi-column>
                        <dxi-column dataField="totST" caption="瓶颈待料时间(分)">
                        </dxi-column>
                        <dxi-column dataField="totWorkTime" caption="总工作时间(分)">
                        </dxi-column>
                        <dxi-column dataField="grossJPH" caption="Gross JPH">
                        </dxi-column>
                        <dxi-column dataField="perUptimeReate" caption="Uptime %">
                        </dxi-column>
                        <dxi-column dataField="perDowntime" caption="Downtime %">
                        </dxi-column>
                        <dxi-column dataField="perToolchange" caption="Toolchange %">
                        </dxi-column>
                        <dxi-column dataField="perBlocked" caption="Blocked %">
                        </dxi-column>
                        <dxi-column dataField="perStarved" caption="Starved %">
                        </dxi-column>
                        <dxi-column dataField="mtbf" caption="MTBF">
                        </dxi-column>
                        <dxi-column dataField="mcbf" caption="MCBF">
                        </dxi-column>
                        <dxi-column dataField="mttr" caption="MTTR">
                        </dxi-column>
                        <dxi-column dataField="perSAA" caption="SAA %">
                        </dxi-column>
                        <dxi-column dataField="saajph" caption="SAA JPH">
                        </dxi-column>
                        <dxi-column dataField="bbottleneckJPH" caption="瓶颈 JPH">
                        </dxi-column>
                        <dxi-column dataField="offLineJPH" caption="下线 JPH">
                        </dxi-column>
                    </dx-data-grid>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
                <div class="box box-default">
                        <div class="box-header with-border">
                            <h3 class="box-title">Bottle neck Monitoring</h3>
                            <div class="box-tools pull-right">
                                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                            </div>
                        </div>
                        <div class="box-body">
                            <div echarts [options]="tipChartOption0" class="demo-chart" (chartInit)="onChartInit('Bottle neck Monitoring',$event)" style="height:300px;"></div>
                        </div>
                    </div>
            <div class="box box-default">
                <div class="box-header with-border">
                    <h3 class="box-title">Bottle neck Monitoring</h3>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                    </div>
                </div>
                <div class="box-body">
                    <div echarts [options]="tipChartOption1" class="demo-chart" (chartInit)="onChartInit(0,$event)" style="height:300px;"></div>
                </div>
            </div>
            <div class="box box-default">
                <div class="box-header with-border">
                    <h3 class="box-title">TOP 问题</h3>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                    </div>
                </div>
                <div class="box-body">
                    <div class="row">
                        <div class="col-md-9">
                            <dx-data-grid #topGrid1 [dataSource]="topGridList1" [showColumnLines]="true" [showRowLines]="true" 
                            [showBorders]="true" [rowAlternationEnabled]="true" [columnMinWidth]="50" [columnAutoWidth]="true">
                                <dxi-column dataField="index" caption="NO.">
                                </dxi-column>
                                <dxi-column dataField="problem" caption="Downtime -- 问题汇总">
                                </dxi-column>
                                <dxi-column dataField="frequency" caption="频次">
                                </dxi-column>
                                <dxi-column dataField="time" caption="时间">
                                </dxi-column>
                                <dxi-column dataField="measures" caption="长期措施">
                                </dxi-column>
                            </dx-data-grid>
                            <dx-data-grid #topGrid2 [dataSource]="topGridList2" [showColumnLines]="true" [showRowLines]="true" 
                            [showBorders]="true" [rowAlternationEnabled]="true" [columnMinWidth]="50" [columnAutoWidth]="true">
                                <dxi-column dataField="index" caption="NO.">
                                </dxi-column>
                                <dxi-column dataField="problem" caption="CycleTime -- 问题汇总">
                                </dxi-column>
                                <dxi-column dataField="frequency" caption="频次">
                                </dxi-column>
                                <dxi-column dataField="time" caption="时间">
                                </dxi-column>
                                <dxi-column dataField="measures" caption="长期措施">
                                </dxi-column>
                            </dx-data-grid>
                            <dx-data-grid #topGrid3 [dataSource]="topGridList3" [showColumnLines]="true" [showRowLines]="true" 
                            [showBorders]="true" [rowAlternationEnabled]="true" [columnMinWidth]="50" [columnAutoWidth]="true">
                                <dxi-column dataField="index" caption="NO.">
                                </dxi-column>
                                <dxi-column dataField="problem" caption="Toolchange -- 问题汇总">
                                </dxi-column>
                                <dxi-column dataField="frequency" caption="频次">
                                </dxi-column>
                                <dxi-column dataField="time" caption="时间">
                                </dxi-column>
                                <dxi-column dataField="measures" caption="长期措施">
                                </dxi-column>
                            </dx-data-grid>
                            <dx-data-grid #topGrid4 [dataSource]="topGridList4" [showColumnLines]="true" [showRowLines]="true" 
                            [showBorders]="true" [rowAlternationEnabled]="true" [columnMinWidth]="50" [columnAutoWidth]="true">
                                <dxi-column dataField="index" caption="NO.">
                                </dxi-column>
                                <dxi-column dataField="problem" caption="Starved -- 问题汇总">
                                </dxi-column>
                                <dxi-column dataField="frequency" caption="频次">
                                </dxi-column>
                                <dxi-column dataField="time" caption="时间">
                                </dxi-column>
                                <dxi-column dataField="measures" caption="长期措施">
                                </dxi-column>
                            </dx-data-grid>
                            <dx-data-grid #topGrid5 [dataSource]="topGridList5" [showColumnLines]="true" [showRowLines]="true" 
                            [showBorders]="true" [rowAlternationEnabled]="true" [columnMinWidth]="50" [columnAutoWidth]="true">
                                <dxi-column dataField="index" caption="NO.">
                                </dxi-column>
                                <dxi-column dataField="problem" caption="Blocked -- 问题汇总">
                                </dxi-column>
                                <dxi-column dataField="frequency" caption="频次">
                                </dxi-column>
                                <dxi-column dataField="time" caption="时间">
                                </dxi-column>
                                <dxi-column dataField="measures" caption="长期措施">
                                </dxi-column>
                            </dx-data-grid>
                        </div>
                        <div class="col-md-3">
                            <ul class="products-list product-list-in-box">
                                <li class="item">
                                    <div style="margin-left:0px" class="product-info">
                                        <a href="javascript:return false" class="product-title">% Uptime
                                        <span class="label label-primary pull-right" style="width:120px; font-size:18px">{{totTIPData.perUptimeReate}}</span></a>
                                    </div>
                                </li>
                                <li class="item">
                                    <div style="margin-left:0px" class="product-info">
                                        <a href="javascript:return false" class="product-title">% Downtime
                                        <span class="label label-danger pull-right" style="width:120px; font-size:18px">{{totTIPData.perDowntime}}</span></a>
                                    </div>
                                </li>
                                <li class="item">
                                    <div style="margin-left:0px" class="product-info">
                                        <a href="javascript:return false" class="product-title">% Toolchange
                                        <span class="label label-warning pull-right" style="width:120px; font-size:18px">{{totTIPData.perToolchange}}</span></a>
                                    </div>
                                </li>
                                <li class="item">
                                    <div style="margin-left:0px" class="product-info">
                                        <a href="javascript:return false" class="product-title">% Blocked
                                        <span class="label label-info pull-right" style="width:120px; font-size:18px">{{totTIPData.perBlocked}}</span></a>
                                    </div>
                                </li>
                                <li class="item">
                                    <div style="margin-left:0px" class="product-info">
                                        <a href="javascript:return false" class="product-title">% Starved
                                        <span class="label label-default pull-right" style="width:120px; font-size:18px">{{totTIPData.perStarved}}</span></a>
                                    </div>
                                </li>
                                <li class="item">
                                    <div style="margin-left:0px" class="product-info">
                                        <a href="javascript:return false" class="product-title">MCBF
                                        <span class="label label-success pull-right" style="width:120px; font-size:18px">{{totTIPData.mcbf}}</span></a>
                                    </div>
                                </li>
                                <li class="item">
                                    <div style="margin-left:0px" class="product-info">
                                        <a href="javascript:return false" class="product-title">MTTR
                                        <span class="label label-success pull-right" style="width:120px; font-size:18px">{{totTIPData.mttr}}</span></a>
                                    </div>
                                </li>
                                <li class="item">
                                    <div style="margin-left:0px" class="product-info">
                                        <a href="javascript:return false" class="product-title">Cycletime(秒)
                                        <span class="label label-success pull-right" style="width:120px; font-size:18px">{{totTIPData.actualCT}}</span></a>
                                    </div>
                                </li>
                                <li class="item">
                                    <div style="margin-left:0px" class="product-info">
                                        <a href="javascript:return false" class="product-title">Gross Th(JPH)
                                        <span class="label label-success pull-right" style="width:120px; font-size:18px">{{totTIPData.grossJPH}}</span></a>
                                    </div>
                                </li>
                                <li class="item">
                                    <div style="margin-left:0px" class="product-info">
                                        <a href="javascript:return false" class="product-title">S.A.A Th(JPH)
                                        <span class="label label-success pull-right" style="width:120px; font-size:18px">{{totTIPData.saajph}}</span></a>
                                    </div>
                                </li>
                                <li class="item">
                                    <div style="margin-left:0px" class="product-info">
                                        <a href="javascript:return false" class="product-title">NET Th(JPH)
                                        <span class="label label-success pull-right" style="width:120px; font-size:18px">{{totTIPData.bbottleneckJPH}}</span></a>
                                    </div>
                                </li>
                                <li class="item">
                                    <div style="margin-left:0px" class="product-info">
                                        <a href="javascript:return false" class="product-title">NET Line(JPH)
                                        <span class="label label-success pull-right"  style="width:120px; font-size:18px">{{totTIPData.offLineJPH}}</span></a>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>

                </div>
            </div>

            <div class="box box-default">
                <div class="box-header with-border">
                    <h3 class="box-title">%Uptime</h3>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                    </div>
                </div>
                <div class="box-body">
                    <div echarts [options]="tipChartOption2" class="demo-chart" (chartInit)="onChartInit('%Uptime',$event)" style="height:300px;"></div>
                </div>
            </div>

            <div class="box box-default">
                <div class="box-header with-border">
                    <h3 class="box-title">%Tool changed</h3>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                    </div>
                </div>
                <div class="box-body">
                    <div echarts [options]="tipChartOption3" class="demo-chart" (chartInit)="onChartInit('%Tool changed',$event)" style="height:300px;"></div>
                </div>
            </div>
            <div class="box box-default">
                <div class="box-header with-border">
                    <h3 class="box-title">%Blocked</h3>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                    </div>
                </div>
                <div class="box-body">
                    <div echarts [options]="tipChartOption4" class="demo-chart" (chartInit)="onChartInit('%Blocked',$event)" style="height:300px;"></div>
                </div>
            </div>
            <div class="box box-default">
                <div class="box-header with-border">
                    <h3 class="box-title">%Starved</h3>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                    </div>
                </div>
                <div class="box-body">
                    <div echarts [options]="tipChartOption5" class="demo-chart" (chartInit)="onChartInit('%Starved',$event)" style="height:300px;"></div>
                </div>
            </div>
            <div class="box box-default">
                <div class="box-header with-border">
                    <h3 class="box-title">%Downtime</h3>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                    </div>
                </div>
                <div class="box-body">
                    <div echarts [options]="tipChartOption6" class="demo-chart" (chartInit)="onChartInit('%Downtime',$event)" style="height:300px;"></div>
                </div>
            </div>

            <div class="box box-default">
                <div class="box-header with-border">
                    <h3 class="box-title">MCBF</h3>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                    </div>
                </div>
                <div class="box-body">
                    <div echarts [options]="tipChartOption7" class="demo-chart" (chartInit)="onChartInit('MCBF',$event)" style="height:300px;"></div>
                </div>
            </div>
            <div class="box box-default">
                <div class="box-header with-border">
                    <h3 class="box-title">MTTR</h3>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                    </div>
                </div>
                <div class="box-body">
                    <div echarts [options]="tipChartOption8" class="demo-chart" (chartInit)="onChartInit('MTTR',$event)" style="height:300px;"></div>
                </div>
            </div>

            <div class="box box-default">
                <div class="box-header with-border">
                    <h3 class="box-title">%SAA</h3>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                    </div>
                </div>
                <div class="box-body">
                    <div echarts [options]="tipChartOption9" class="demo-chart" (chartInit)="onChartInit('%SAA',$event)" style="height:300px;"></div>
                </div>
            </div>
            <div class="box box-default">
                <div class="box-header with-border">
                    <h3 class="box-title">Cycletime</h3>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                    </div>
                </div>
                <div class="box-body">
                    <div echarts [options]="tipChartOption10" class="demo-chart" (chartInit)="onChartInit('Cycletime',$event)" style="height:300px;"></div>
                </div>
            </div>
            <div class="box box-default">
                <div class="box-header with-border">
                    <h3 class="box-title">BN Throughput(JPH)</h3>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                    </div>
                </div>
                <div class="box-body">
                    <div echarts [options]="tipChartOption11" class="demo-chart" (chartInit)="onChartInit('BN Throughput(JPH)',$event)" style="height:300px;"></div>
                </div>
            </div>
        </div>
    </div>
</section>